﻿<!DOCTYPE html>
<html>
<head>
  <title>Non-Realtime Dragging</title>
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
  <meta name="description" content="A modification of DraggingTool to show a ghost image of what is being moved, rather than moving the nodes and links in realtime." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../release/go.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script src="NonRealtimeDraggingTool.js"></script>
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { // install the replacement DraggingTool:
            draggingTool: $(NonRealtimeDraggingTool, { duration: 600 }),
            "undoManager.isEnabled": true
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { locationSpot: go.Spot.Center },
          $(go.Shape, "Circle",
            {
              fill: "white", // the default fill, if there is no data-binding
              portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
              // allow all kinds of links from and to this port
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
            },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              font: "bold 14px sans-serif",
              stroke: '#333',
              margin: 6,  // make some extra space for the shape around the text
              isMultiline: false,  // don't allow newlines in text
              editable: true  // allow in-place editing by user
            },
            new go.Binding("text", "text").makeTwoWay())  // the label shows the node data's text
        );

      myDiagram.model = new go.GraphLinksModel([
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
        { key: 4, text: "Delta", color: "pink", group: 5 },
        { key: 5, text: "Epsilon", color: "green", isGroup: true }
      ], [
          { from: 1, to: 2, color: "blue" },
          { from: 2, to: 2 },
          { from: 3, to: 4, color: "green" },
          { from: 3, to: 1, color: "purple" }
        ]);
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <p>
    This custom <a>DraggingTool</a> class causes the user to drag around a translucent image of the Nodes and Links being moved,
    leaving the selected Parts in place, rather than actually moving those Nodes and Links in realtime.
    Only when the mouse up occurs does the move happen.
  </p>
  <p>
    This tool is defined in its own file, as <a href="NonRealtimeDraggingTool.js">NonRealtimeDraggingTool.js</a>
  </p>
</div>
</body>
</html>